<template>
  <el-dialog
    title="导入"
    width="500px"
    :visible="dialogVisible"
    @close="close"
  >
    <!-- 先在vscdoe里面写好html结构，再去浏览器控制台里面写样式 -->
    <div class="main">
      <input ref="inputRef" style="display: none" type="file" accept=".xls, .xlsx" @change="fileChangeTmp">
      <div class="content">
        <div class="top">
          <i class="el-icon-upload" />
        </div>
        <div class="middle" @click="downloadTemplateTmp">下载导入模板</div>
        <div class="bottom">
          <span>将文件拖动到此处或</span>
          <span @click="uploadFileTmp">点击上传</span>
        </div>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { saveAs } from 'file-saver'
import { templateExportRequest, userImportRequest } from '@/api/employee'

export default {
  name: 'ImportExcelCom',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    async downloadTemplateTmp() {
      const res = await templateExportRequest()
      // 将二进制保存为一个文件
      saveAs(res, '上传员工的模板文件.xlsx')
    },
    uploadFileTmp() {
      this.$refs.inputRef.click()
    },
    async fileChangeTmp(e) {
      // e.target.value --- 对应 type=text 的input输入框
      // e.target.files --- 对应 type=file 的输入框
      const files = e.target.files

      if (files && files.length > 0) {
        // 在这里就要整理 发请求的参数 然后再发请求
        // 一般只要是发送文件给后端，一般都要用 FormData 这个对象去装file文件对象
        const formData = new FormData()
        formData.append('file', files[0])

        try {
          await userImportRequest(formData)
          // 当我们上传请求成功以后， 关闭弹出框， 刷新页面（发起后面获取列表的请求）
          this.close()

          // 子组件向和父组件做任何交互， 都需要去 通知父组件($emit)
          // this.$parent.getEmployee()
          // this.$children.xxxxx()
          // this.$root.xxx()
          this.$emit('import-success')
        } catch (_) {
          //
        } finally {
          // 无论请求成功或者失败，都要把已经上传的文件列表，清空，防止下次上传有bug
          this.$refs.inputRef.value = ''
        }
      }
    },
    close() {
      this.$emit('update:dialog-visible', false)
      // this.$emit('input')
    }
  }
}
</script>

<style lang="scss">
.main {
  .el-icon-upload::before {
    font-size: 50px;
    color: #afacac;
  }
}
</style>

<style lang="scss" scoped>
.main {
    border: 2px dashed #e0d9d9;
    border-radius: 8px;
    .content {
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .middle{
        margin: 20px 0;
        font-size: 18px;
        color: #6387e1f5;
        cursor: pointer;
      }
      .bottom {
        span:first-child {
          color: #a1a9ac;
          font-size: 16px;
        }
        span:nth-child(2) {
          color: #6387e1f5;
          margin-left: 5px;
          font-weight: bold;
        cursor: pointer;
        }
      }
    }
}

// .bottom span:first-child {
//   color: red;
// }
// .bottom span:nth-child(2) {
//   color: blue;
// }
</style>
